 <html>
<head>		  
      <title>Bootstrap Jquery Template</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"></meta>
      <meta http-equiv="encoding"     content="utf-8"></meta>
      <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap_cerulean.css" />
      <link rel="stylesheet" type="text/css" media="screen" href="css/stickFooter.css" />

      <style>
          .modal {
            display: none;
            position: fixed;
            z-index: 2001;
            top: 0;
            left 0;
            height: 100%;
            weight: 100%;
            background: rgba( 0,0,0,.7)
                        url('/admin/images/loading/loading.gif')
                        50% 50%
                        no-repeat;
          }  
          body.loading {
            overflow: hidden;
          }
          body.loading .modal {
            display: block;
          }
          .manualHover {
              background-color: #2FA4E7;
              color: #FFFFFF !important;
              text-decoration: none;
          }
      </style>
</head>
<body>
	<div id="wrap">
      <nav id="nav-bar" class="navbar navbar-inverse" role="navigation" style="border-radius:0px;">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="toggleBtn">
          <span class="sr_only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>       
        <a class="navbar-brand" href="#" onclick="serverReload();">CPCE</a>
      </div> 
      
      <div id="empNavbar" class="collapse navbar-collapse navbar-inverse-collapse" data-parent="#nav-bar">
        <ul class="nav navbar-nav">
          <li><a id="mapEngines"  href="#">Home</a></li>
          <li><a id="wmsConfig" href="#">About</a></li>
          <li><a id="mapToolConfig" href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span></a>
            <ul class="dropdown-menu">            
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Import/Export</li>
              <li><a href="#">Import</a></li>
              <li><a href="#">Export</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>           
          </li>
        </ul>       
        <ul class="nav navbar-nav pull-right" style="margin-top: 5px;">
          <li class="dropdown" >
            <a href="#" class="dropdown-toggle pull-right" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span></a>
            <ul class="dropdown-menu pull-right">
              <li><a id="import" href="#"><span class="glyphicon glyphicon-import"></span> Import Database</a></li>
              <li><a id="export" href="#" download="map-config.json" onclick="exportConfig()"><span class="glyphicon glyphicon-export"></span> Export Database</a></li>

              <li class="divider"></li>
              <li class="nav-header">Data Configurations</li>
              <li><a id="import" href="javascript:void(0)"><span class="glyphicon glyphicon-import"></span> Import Data</a></li>
              <li><a id="export" href="#" download="map-config.json" onclick="exportConfig()"><span class="glyphicon glyphicon-export"></span> Export Data</a></li>


              <li class="divider"></li>
              <li class="nav-header">Data Configurations</li>
              <li><a id="importLink" href="javascript:void(0)"><span class="glyphicon glyphicon-import"></span> Import ME HOMIE</a></li>              
              <li><div id="43"></div></li>
            </ul>
          </li>         
        </ul>                                 
      </div>
    </nav>
      
      
		<div class="container">
			<div class="page-header">
			  <h1>Sticky footer with fixed navbar</h1>
			</div>
			<p class="lead">
        Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar  has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.
      </p>

<!--
      <p>
        <form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
           <input type="file" size="60" name="myfile" />

           <input type="file" class="btn btn-primary" name="myfile" />
           
           <input type="submit" value="Ajax File Upload">
        </form>
      </p>
      <p>
        <div id="progress">
  
        </div>        <div id="bar"></div>
          <div id="percent">0%</div >
        <br/>
         
        <div id="message"></div>
      </p> 
      <p>        
            <a id="fileUpload" href='javascript:void(0)' class="btn btn-primary" type="file">browse</a>
            <button type="button" class="btn btn-warning">Reset</button>            
      </p>-->

      <p>
        <iframe name='hidden' id='hidden' style='display:none'></iframe>
        <a id="fileBrowser" href='javascript:void(0)' class="btn btn-primary" type="file">browse</a>
      </p>


      <div id="loader"></div>

      <div id="fileuploadModal" class="modal">
        <ul>          
          <li class="divider"></li>
          <li class="nav-header">Data Configurations</li>
          <li><a id="import" href="javascript:void(0)"><span class="glyphicon glyphicon-import"></span> Browse</a></li>              
          <li><a id="importBrowser" href='javascript:void(0)' class="btn btn-primary" type="file">browse</a></li>
        </ul>
      </div>

      <div style="height:50px" ><hr /></div>
      <br /><hr />

      <div>
        <form action="http://localhost:8080/map-config/admin/mapengine/config/import" method="POST" enctype="multipart/form-data">
          <input type="file" name="configUpload" />
          <button type="submit" value="submit">Submit</button>
        </form>
      </div>   <br /><hr />

      <div id="33"></div>

     

		</div>
		<div id="push"></div>
	</div>
    
    <div id="footer" class="navbar-inverse">
      <div class="container">
        <p class="text-muted credit">Example Footer: 
          <a href="#">Footer information</a> and 
          <a href="#">other any other info required</a>.
        </p>
      </div>
    </div>


    <script type='text/javascript' src="js/jquery-1.10.2.min.js"></script>
    <script type='text/javascript' src="js/bootstrap.min.js"></script>
    <script type='text/javascript' src="js/fileUpload.js"></script>

 <script type='text/javascript'> 
    var importUrl = "http://localhost:8080/map-config/admin/mapengine/config/import";
    createButton($('#33'), 'Import File', ' btn btn-success', importUrl, "POST");
    createLink($('#43'), $('#importLink'), 'Import Data', '', importUrl, "POST");

    function createButton(elem,value,cssClasses,url,method) {
          var div  = $('<div id="uploadDiv"></div>').appendTo(elem);
          var anch = $('<a id="browse-btn" href="javascript:void(0)" class="' + cssClasses +'" >'+ value +'</a>').appendTo(div);

          var height = ( anch.outerHeight() <= 0 ) ? 25  : anch.outerHeight();
          var width  = ( anch.outerWidth()  <= 0 ) ? 159 : anch.outerWidth();
          var posTop = ( height * -1 );

          var form = $('<form id="uploadForm" enctype="multipart/form-data" action="'+url+'" method="'+method+'"></form').appendTo(div).css({
            'height' : '0px'
          });          
          
          var input = $('<input name="fileInput" type="file" />').appendTo(form).css({
              'position': 'relative',
              'overflow': 'hidden',
              '-moz-opacity': '0',
              'filter':  'alpha(opacity: 0)',
              'opacity': '0',
              'z-index': '1002',
              'height' : height,
              'width' : width,
              'cursor' : 'pointer',              
              'top'   : posTop
            }).hover(function() {
              anch.addClass("manualHover");
            }, function() {
              anch.removeClass("manualHover");
            });

        };

          $( "#uploadForm" ).on( "change", function() {
            $( this ).submit();
          });

    function createLink(elem,anchor,value,cssClasses,url,method) {
          var div  = $('<div id="uploadDiv"></div>').appendTo(elem);
          var anch = ( anchor === undefined ) ? $('<a id="browse-btn" href="javascript:void(0)" class="' + cssClasses +'" >'+ value +'</a>').appendTo(div) : anchor;

          var height = 25;
          var width  = 159;
          var posTop = ( height * -1 );              

          var form = $('<form id="uploadForm" enctype="multipart/form-data" action="'+url+'" method="'+method+'"></form').appendTo(div).css({
            'height' : '0px'
          });          

          var input = $('<input id="fileInput" name="fileInput" type="file" />').appendTo(form).css({
              'position': 'relative',
              'overflow': 'hidden',
              '-moz-opacity': '0',
              'filter':  'alpha(opacity: 0)',
              'opacity': '0',
              'z-index': '1002',
              'height' : height,
              'width'  : width,
              'cursor' : 'pointer',              
              'top'    : posTop
            }).hover(function() {
              anchor.addClass("manualHover");
            }, function() {
              anchor.removeClass("manualHover");
            });
        };
        
      </script>

    <script>
      $('a#fileBrowser').file().choose(function(e, inp) {
        // we make a hidden form and append it to body. Replace example.com with your server.
        var form = $('<form method="POST" enctype="multipart/form-data" action="http://localhost:8080/map-config/admin/mapengine/config/import" target="hidden"></form>').hide().appendTo('body');
         
        inp.attr('name', 'file-upload'); // its REQUIRED to give the input a name for the browser to submit it
        form.append(inp).submit();
      });


      $('a#importBrowser').file().choose(function(e, inp) {
        // we make a hidden form and append it to body. Replace example.com with your server.
        var form = $('<form method="POST" enctype="multipart/form-data" action="http://localhost:8080/map-config/admin/mapengine/config/import" target="hidden"></form>').hide().appendTo('body');
         
        inp.attr('name', 'file-upload'); // its REQUIRED to give the input a name for the browser to submit it
        form.append(inp).submit();
      });


      $('.modal').modal('hide');
    </script>


</body>
</html>